<template>
	<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
		<div class="list">
			<dl v-for="v in list" :key="v.id" class="list-item" @click="toDetail(v.id)">
				<dt>
					<img :src="v.url" alt="">
				</dt>
				<dd>
					<h3>{{ v.title }}</h3>
					<p>{{ v.desc }}</p>
					<div>
						<b class="current-price">￥:{{ (v.price * v.discount / 100) }}</b>
						<b class="old-price"><s><small>￥:{{ v.price }}</small></s></b>
					</div>
				</dd>
			</dl>
		</div>
	</van-list>
</template>


<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { fetchList } from '@/api';
import { useRouter } from 'vue-router'
import { ListItem } from './types'
const router = useRouter()

const list = ref<ListItem[]>([])
const finished = ref(false)
const loading = ref(false)

const config = reactive({
	pageCode: 1,
	pageSize: 10
})

const onLoad = async () => {
	// 请求数据
	const resp = await fetchList(config);
	const { code, message, data } = resp.data;
	if (code === 200) {
		// 合拼数据
		list.value = [...list.value, ...resp.data.data]
		// 页码递增
		config.pageCode++
	} else {
		finished.value = true
	}

	// 关闭loading
	loading.value = false

}

const toDetail = (id: string) => {
	router.push({ name: 'detail', params: { id } })
}

</script>

<style lang="scss" scoped>
.list {
	.list-item {
		display: flex;

		img {
			width: 120px;
		}

		dd {
			padding: 4px;

			p {
				font-size: 12px;
			}

			div {
				.old-price {
					font-size: 12px;
				}

				.current-price {
					font-size: 20px;
					color: red;
				}
			}
		}
	}
}
</style>